<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>临时生成方案</title>


	 <script src="/static/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
 <link rel="stylesheet" type="text/css" href="/static/css/submit.css"/>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
   <style>

        body{
            background-color: #1aa67d;
        }
        #dd{
            position: absolute;
            left:90px;
				top:70px;
            border: 1px solid black;
        }
        #myCanvas,#top,#bg{
             position: absolute;
            left:0;
				top:0;
        }
            #dd{
				float: left;
            width:900px;
            height: 750px;
            margin: 0 auto;
            overflow: hidden;
			float:left;

        }
        #myCanvas{

				z-index: 5;


        }
        	 #top{

				z-index: 10;


        }
.right
{
    float: left;
	position:absolute;
    left:1020px;
    top:70px;
	height:730px;
	width:520px;

	overflow:scroll;
    scrollbar-width: none;
	padding-top:20px;
    background-color: #e0f4e0;
}



.goods
{
	position:relative;
	width:220px;/* 210px */
	height:350px;/* 300px */
	margin:10px 10px;
	float:left;
	text-align: center;
	transition: all 0.3s;
	background-color: rgba(133,123,132,0.07);
	font-weight:bold;
    cursor: pointer;
}
.goods img
{
	margin-top:30px;
	width:80%;
	height:255px;
	border:1px solid black;
	margin-bottom: 20px;
}
.goods .explain{
	margin-top:10px;
	text-align:left;
	padding-left:30px;
	font-size:16px;
}
.goods .e2
{
	color:orange;
	margin-top:16px;
}
.goods:hover
{
	box-shadow: 10px 10px 10px #999;
}

select{
	width:100%;
	height:40px;
	float:left;
	padding-left:10px;
	font-size: 18px;
}
.layui-input-inline{
	width:60%;
	float:left;
	margin-left:20px;
	float: left;
}
.button{
	width:40%;
	font-size: 20px;
	background-color: #e33e33;
    color:white;
	border-radius:15px 0 0 15px ;
	color:white;
	padding:7px;
    margin-right: 20px;
	float: left;
	cursor: pointer;
    margin-bottom: 20px;
			cursor:pointer;

			background-color:#0b2e13;
            border: 2px solid #e3fefd;
            opacity: 0.75;
                color: #fff;

            transition: all 0.3s;
    display: block;
}

         #bg{

				z-index: 1;
				background: #e3fefd;
				cursor:crosshair;


        }
         .bg_color{
             background-color: #e3fefd;
             height:750px;
         }
        img{
            width:100%;
        }

        iframe{
            width:90%;
            height:56%;
            left:50%;
            top:30%;
        }


        .tools{

            position: absolute;
            left:52px;
            top:70px;
            float:left;
            width:100px;
        }

    </style>




</head>

<body>
<div class = "tools">
     <button class="button" id="sweep">隐藏阴影</button>
     <button class="button" id="round">周边显示</button>
     <button class="button" id="3d">查看3d模型</button>
     <button class="button" id="save">存储本方案</button>
</div>
 <div id="dd">
     <canvas id = "top" width = 900px height = 750px>
            您的浏览器不支持canvas标签。
        </canvas>

      <canvas id="myCanvas" width=900px height=750px>

<!--            您的浏览器不支持canvas标签。-->
     </canvas>
     <img id = "bg" src = "/static/files/img/{{data.imgName}}"></img>
     <div class = "bg_color"></div>
 </div>

 <div class = "right" id = "right">

<!--     <button class="button" id="create">存储图片</button>-->
<div class="layui-input-inline">
      <select name="choose" id="choose" onchange="post(this.value)" style = "width:430px;">
        <option value="0">综合排序</option>
        <option value="1">按货币值排序</option>
		<option value="2">按光照时长排序</option>
	    <option value="3">按建筑密度排序</option>
      </select>
</div>
<!--	 <button class="button" id="search">检索</button>-->
<div id = "plans">
				{% for plan in data.plans%}
				<div class="goods" id = "goods{{plan[0]}}" onclick="javascript:location.href='temp?pid={{plan[0]}}' ">
					<iframe src = "pre?pid={{plan[0]}}">
<!--view?pid={{plan[0]}}-->
                    </iframe>
                    <div class="explain">货币值：{{plan[1]}}</div>

				<div class="explain">光照时长：{{plan[2]}} h</div>
                    <div class="explain">建筑密度：{{plan[3]}}</div>

				</div>
				{% endfor %}

				</div>
</div>


 <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>

    var rectList = {{data.builds}};
     var t = 2;
     var a={{data.arr}};
     var temparr = {{data.temparr}};

    var ct;
    var screen = document.getElementById("myCanvas");
    if(screen.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        ct = screen.getContext("2d");

	}

     for(var i =0;i<500;i++)
    {
        for(var j =0;j<500;j++)
        {
        if (a[i][j]==1)
            {
                ct.fillStyle="#dcf1f5";
                ct.fillRect(t*j,t*i,1*t,1*t);
            }
        if(a[i][j]==9)
        {
             ct.fillStyle="#dcdcdc";
                ct.fillRect(t*j,t*i,1*t,1*t);
        }
        }
    }






    $(function(){
		var canvas = $("#top"),
		ctx = canvas[0].getContext('2d'),
		winWidth = $(window).width(),
		winHeight = $(window).height(),
		moveItem = null,
		startPos = {},
		moving = false;

		// canvas.attr('width',winWidth).attr("height",winHeight);

		ctx.strokeStyle = '#000';
		ctx.lineWidth = 2;




		var getCanvasPoint = function(x,y) {
			var canvasOffset = canvas.offset();
			return {
				x: x - canvasOffset.left,
				y: y - canvasOffset.top
			}
		}


		var drawRect = function(rect){
		    x=rect[0];
		    y=rect[1];
		    w= rect[2];
		    h = rect[3];
		    floor = rect[4];//楼层高
		    r = rect[5];
		    s = rect[6];
            ctx.strokeStyle = "black";
			ctx.beginPath();
            ctx.strokeStyle = "black";
			ctx.rect(x,y,w,h);
			ctx.fillStyle="#c3f6f0";
            ctx.fillRect(x,y,w,h);

            ctx.textAlign = "start"
            ctx.fillStyle = "white"
            ctx.font = "20px 微软雅黑";
            ctx.fillText(floor,x+w/3,y+h*3/4);

			ctx.moveTo(x,y+h);//左下
			ctx.lineTo(x-r,y+h);//E点
            ctx.lineTo(x-r,y);//F点
            ctx.lineTo(x-r,y-r);
            ctx.lineTo(x,y-r);
            ctx.lineTo(x,y-s);//左上高H点
            ctx.lineTo(x+w,y-s);//右上高I点
            ctx.lineTo(x+w,y-r);
            ctx.lineTo(x+w+r,y-r);//右中外
            ctx.lineTo(x+w+r,y+h)//右下
            ctx.lineTo(x+w,y+h);
		}
        var sweep_draw = function(x,y,w,h,f)
        {

            ctx.beginPath();
         //   ctx.fillStyle = "red";1
            ctx.strokeStyle = '#6c6969';
			ctx.rect(x,y,w,h);
            ctx.textAlign = "start"
            ctx.fillStyle = "#262424"
            ctx.font = "20px 微软雅黑";
            ctx.fillText(f,x+w/3,y+h*3/4);

        }
		var sweep = document.getElementById("sweep");
		sweep.onclick = function()
        {
            ctx.clearRect(0, 0,canvas.width(), canvas.height());
            $.each(rectList, function(n,v){
			sweep_draw(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3],rectList[n][4]);
			ctx.stroke();
		    });
        }

		// init
		ctx.clearRect(0, 0,canvas.width(), canvas.height());

		$.each(rectList, function(n,v){
		  /*for(var i =rectList[n][0];i<(rectList[n][0]+rectList[n][2]);i++){
			for(var j =rectList[n][1];j<(rectList[n][1]+rectList[n][3]);j++)
			{
			x=parseInt(i/2);
			y=parseInt(j/2);
			a[x][y]=10;

			}
		}*/

			drawRect(rectList[n]);
			ctx.stroke();
		});


		canvas.on("mousedown", function(e){
			moving = true;
			var point = getCanvasPoint(e.pageX, e.pageY);
			$.each(rectList, function(n, v) {

				drawRect(rectList[n]);
				if(ctx.isPointInPath(point.x, point.y)){
					moveItem = n;
					startPos.x = point.x;
					startPos.y = point.y;
					ctx.strokeStyle = "#ff4444";
					for(var i =rectList[n][0];i<(rectList[n][0]+rectList[n][2]);i++){
						for(var j =rectList[n][1];j<(rectList[n][1]+rectList[n][3]);j++){
						x=parseInt(i/2);
						y=parseInt(j/2);
						a[x][y]=1;
						}
					}
				} else {
					ctx.strokeStyle = "#000";
				}
				ctx.stroke();
			})
		});
        ctx.clearRect(0, 0,canvas.width(), canvas.height());
            $.each(rectList, function(n,v){
			sweep_draw(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3],rectList[n][4]);
			ctx.stroke();
		    });
		canvas.on("mousemove", function(e){
			if( !moving && moveItem == null ) {
				return;
			}
			ctx.clearRect(0, 0,canvas.width(), canvas.height());
			var point = getCanvasPoint(e.pageX, e.pageY);
			$.each(rectList, function(n, v) {
				var moveX = 0,
					moveY = 0;


				if(n !== moveItem ){
					ctx.strokeStyle = "#000";
				} else {
					moveX= point.x - rectList[n][0];
					moveY = point.y - rectList[n][1];
					ctx.strokeStyle = "#ff4444";
					x=rectList[n][0] + moveX;
					y=rectList[n][1] + moveY;
					X=parseInt(x/2)
					Y=parseInt(y/2)
					rect_x=rectList[n][2]/2
					rect_y=rectList[n][3]/2
					//使用数组限制楼房移动
					if(a[Y][X]!=1||a[Y][X+rect_x]!=1||a[Y+rect_y][X]!=1||a[Y+rect_y][X+rect_x]!=1) {
					   console.log(a[Y][X])
					    moveX=0;
					    moveY=0;
					}
					rectList[n][0]=rectList[n][0] + moveX;
					rectList[n][1]=rectList[n][1] + moveY;

				}
				//移动后重新画
				drawRect(rectList[n]);


				ctx.stroke();
			})


		});

		canvas.on("mouseup", function(e){
			moving = false;

			$.each(rectList, function(n){
				if (n == moveItem){
					for(var i =rectList[n][0];i<(rectList[n][0]+rectList[n][2]);i++){
					for(var j =rectList[n][1];j<(rectList[n][1]+rectList[n][3]);j++){
					x=parseInt(i/2);
					y=parseInt(j/2);
					a[x][y]=10;
					}
					}
					//rectList[n][0] += point.x - startPos.x;
					//srectList[n][1] += point.y - startPos.y;
				}
			});


				ctx.clearRect(0, 0,canvas.width(), canvas.height());
                 $.each(rectList, function(n,v){
			    sweep_draw(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3],rectList[n][4]);
			    ctx.stroke();
		         });
			startPos = {}
			moveItem = null
		});

	})



	url = "search";
	function post(val) {

		$.ajax({
			url: url,
			type: "post",
			contentType: "application/json",
			data:val,
			success: function (data) {
			   var jsonobj=eval("("+data+")");
			   var plans = document.getElementById("plans");
                p = jsonobj.plans
                var template = '';         //plans的模板
                for(i=0;i<p.length;i++)
                {
                    url1='temp?pid='+p[i][0];
                    url2='pre?pid='+p[i][0];
                    console.log(url1)
                    template+='<div class="goods" onclick="window.location.href=\''+url1+
                        '\'">'+
                        '\t\t\t\t\t<iframe src ="'+url2+'"></iframe>\n' +
                        '\t\t\t\t\t<div class="explain">货币值：'+p[i][1]+'</div>\n' +
                        '\t\t\t\t<div class="explain">光照时长：'+p[i][2]+'</div>\n' +
                        '\t\t\t\t\t<div class="explain">建筑密度：'+p[i][3]+'</div>\n' +
                        '\t\t\t\t</div>'
                }

                plans.innerHTML=template;

			},
			error: function () {
				console.log("未知错误");
			},
		});
	}




//此处做周边显示算法
    var round = document.getElementById("round");

    var bg_img = document.getElementById("bg");
round.onclick =
                function(){
    if(bg_img.style.display=="none") {
        document.getElementById("bg").style.display = "block";
    }
    else{

        document.getElementById("bg").style.display = "none";
    }
}



//页面载入后先刷新一遍
    // function reurl(){
    // 	url = location.href;
    //
    // 	if( url.indexOf("Fresh=") <1 ){
    // 		if( url.indexOf("?") <1 ){
    // 			url = url+"?Fresh="+(Math.floor(Math.random()*100000000+100000000) );
    //
    // 		}else{
    // 			url = url+"&Fresh="+(Math.floor(Math.random()*100000000+100000000) );
    //
    // 		}
    // 		self.location.replace(url);
    //         window.location.reload();
    // 	}
    // }
    // reurl();




  $(document.body).css({
            "overflow-y": "hidden"
        });

//此处做3d跳转
    var three = document.getElementById("3d");
    pid = {{data.pid}};


    three.onclick = function () {


           $.ajax({
            url: '3d',
             type: "post",
             contentType:"application/json",

             data:JSON.stringify(rectList),
            success: function (data) {
                window.location.href ="3d?pid="+pid;
        },
        error: function () {
            console.log("未知错误");
        },
    });

    }



    //  $("#save").on("click",function(event){
    //     event.preventDefault();
    //
    //     var w = $("#dd").width();
    //     var h = $("#dd").height();
    //
    //
    //     //这一坨代码是为了解决截图不清晰的问题，但是ratio应该根据浏览器的分辨率计算，这里先写死的一个数值
    //     var ratio = 2;
    //     //要将 canvas 的宽高设置成容器宽高的 Ratio 倍
    //     var canvas = document.createElement("canvas");
    //     canvas.id = "mycanvas";
    //     canvas.width = w * ratio;
    //     canvas.height = h * ratio;
    //     canvas.style.width = w + "px";
    //     canvas.style.height = h + "px";
    //     var context = canvas.getContext("2d");
    //     //然后将画布缩放，将图像放大ratio倍画到画布上
    //     context.scale(ratio,ratio);
    //
    //
    //     html2canvas(document.getElementById("dd"),{
    //         allowTaint: true,
    //         taintTest: false,
    //         width: w,
    //         height:h,
    //         onrendered: function(canvas) {
    //
    //         }
    //     });
    // });





</script>

    <script src="/static/js/html2canvas.min.js"></script>
<script src="/static/js/canvas2image.js"></script>
</body>


</html>